import { h, fragment } from '@knno/dom/jsx';
import { NavMenu } from '@knno/ui/jsx/navMenu';
import { Rule, Component } from '@knno/ui/routerView';
import { ShowList } from './list';
import { ShowTable } from './table';
import { ShowPulldown } from './pulldown';
import { ShowPopup } from './popup';
import { ShowSelect } from './select';
import { ShowGrid } from './grid';
import { ShowInfiniteGrid } from './gridLoadMore';
import { ShowDialog } from './dialog';
import { ShowButtons } from './button';
import { ShowTag } from './tag';
import { ShowTab } from './tab';
import { ShowPaginator } from './paginator';
import { ShowNavigator } from './navigator';
import { ShowField } from './field';
import { ShowRoller } from './roller';
import { ShowPicker } from './picker';
import { ShowSplitBar } from './splitBar';
import { ShowCalendar } from './calendar';
import { ShowForm } from './form';
import { ShowFiles } from './files';
import { ShowDatebox } from './datebox';
import { ShowInput } from './input';
import { ShowCheckbox } from './checkbox';
import { ShowIcons } from './icon';
import { ShowToast } from './toast';
import { Router } from '@knno/ui/router';
import { ShowChangable } from './changable';
import { ShowRichEdit } from './richedit';
import { ShowNavMenu } from './navMenu';
import { ShowRichForm } from './richForm';
import { ShowFoldable } from './foldable';

const mainRouter = [
	{
		key: 'component',
		name: '表单常用组件',
		children: [
			{
				key: 'button',
				name: '按钮',
				component: () => <ShowButtons />,
			},
			{
				key: 'input',
				name: '输入框',
				component: () => <ShowInput />,
			},
			{
				key: 'checkbox',
				name: '单、复选框',
				component: () => <ShowCheckbox />,
			},
			{
				key: 'select',
				name: '选择框',
				component: () => <ShowSelect />,
			},
			{
				key: 'tag',
				name: '标签选择框',
				component: () => <ShowTag />,
			},
			{
				key: 'calendar',
				name: '日历',
				component: () => <ShowCalendar />,
			},
			{
				key: 'datebox',
				name: '日历选择框',
				component: () => <ShowDatebox />,
			},
			{
				key: 'files',
				name: '文件上传',
				component: () => <ShowFiles />,
			},
		],
	},
	{
		key: 'table',
		name: '表格组件',
		children: [
			{
				key: 'table',
				name: '表格',
				component: () => <ShowTable />,
			},
			{
				key: 'grid',
				name: '数据表格',
				component: () => <ShowGrid />,
			},
			{
				key: 'infinite-grid',
				name: '无限加载的数据表格',
				component: () => <ShowInfiniteGrid />,
			},
			{
				key: 'list',
				name: '数据列表',
				component: () => <ShowList />,
			},
		],
	},
	{
		key: 'other',
		name: '其它组件',
		children: [
			{
				key: 'pulldown',
				name: '下拉刷新',
				component: (path: string) => {
					console.log(path);
					return <ShowPulldown />;
				},
			},
			{
				key: 'dialog',
				name: '对话框',
				component: () => <ShowDialog />,
			},
			{
				key: 'toast',
				name: '土司提示',
				component: () => <ShowToast />,
			},
			{
				key: 'popup',
				name: '弹出层',
				component: () => <ShowPopup />,
			},
			{
				key: 'tab',
				name: '页签',
				component: () => <ShowTab />,
			},
			{
				key: 'paginator',
				name: '分页器',
				component: () => <ShowPaginator />,
			},
			{
				key: 'navigator',
				name: '导航器',
				component: () => <ShowNavigator />,
			},
			{
				key: 'field',
				name: '移动端字段',
				component: () => <ShowField />,
			},
			{
				key: 'roller',
				name: '滚轮选择',
				component: () => <ShowRoller />,
			},
			{
				key: 'picker',
				name: '选择器',
				component: () => <ShowPicker />,
			},
			{
				key: 'splitter',
				name: '分割条',
				component: () => <ShowSplitBar />,
			},
			{
				key: 'changable',
				name: '可变组件',
				component: () => <ShowChangable />,
			},
			{
				key: 'richEditor',
				name: '富文本编辑',
				component: () => <ShowRichEdit />,
			},
			{
				key: 'foldable',
				name: '可折叠组件',
				component: () => <ShowFoldable />,
			},
			{
				key: 'navMenu',
				name: '导航菜单',
				component: () => <ShowNavMenu />,
			},
		],
	},
	{
		key: 'form',
		name: '表单',
		component: () => <ShowForm />,
	},
	{
		key: 'combineForm',
		name: '组合表单',
		component: () => <ShowRichForm />,
	},
	{
		key: 'icon',
		name: '图标组件',
		component: () => <ShowIcons />,
	},
];

interface MenuItem {
	key: string;
	name: string;
	children?: MenuItem[];
	component?: Component;
}

function menuToRules(items: MenuItem[], parent: string): Rule[] {
	return items.flatMap((item) => {
		const path = parent + '/' + item.key;
		if (item.component) {
			return [
				{
					path,
					component: item.component,
				},
			];
		} else if (item.children) {
			return menuToRules(item.children, path);
		} else return [];
	});
}

export function ShowMenu() {
	let menu: NavMenu;
	window.addEventListener('hashchange', () => {
		menu.selectedPath(location.hash.substring(2));
	});
	return (
		<NavMenu
			items={mainRouter}
			ref={(m) => (menu = m)}
			columns={{ text: 'name' }}
			selectedPath={location.hash.substring(2)}
			singleGroupMode
			onMenuItemClick={(item, path) => {
				Router.push('/' + path);
			}}
		/>
	);
}

export const routerDef = menuToRules(mainRouter, '');
